<template>
  <div class="profile">
   <div class="title">
      <div class="text">购物街</div>
  </div>
  <!-- 用户信息 -->
  <div class="userinfo">
     <div class="avatar iconfont icon-touxiang">
     </div>
     <div class="userinfo-right">
       <div class="login">登录/注册</div>
       <div class="phone">
         <i class="iconfont icon-shouji"></i>
         <span>暂无绑定手机</span>
       </div>
     </div>
  </div>
  <!-- 账户信息 -->
   <div class="account">
     <div class="account-item">
       <div class="number">
         <span class="balance">0.00</span>元
       </div>
       <div class="account-info">我的余额</div>
     </div>
     <div class="account-item">
       <div class="number">
         <span class="balance">0</span>个
       </div>
       <div class="account-info">我的优惠</div>
     </div>
     <div class="account-item">
       <div class="number">
         <span class="balance">0</span>分
       </div>
       <div class="account-info">我的积分</div>
     </div>
   </div>
  <!-- 操作列表区 -->
  <ListView :listdata="orderList"></ListView>
  <ListView :listdata="serviceList"></ListView>
  </div>
</template>

<script>
// 导入子组件
import ListView from './listview.vue'
export default {
  name: 'profile',
  data() {
    return {
      orderList: [
        { icon: 'icon-mail',  info: '我的消息' },
        { icon: 'icon-shopping',  info: '积分商城' },
        { icon: 'icon-service',  info: '会员服务' },
      ],
      serviceList: [
        { icon: 'icon-cart', info: '我的购物车' },
        { icon: 'icon-down', info: '下载购物APP' },
      ]
    }
  },
  components: {
    ListView
  }
}
</script>

<style lang='stylus' scoped>
.profile
  background-color: #f2f2f2
  .title
    width 100%vw
    height 44px
    line-height 44px
    text-align center
    background-color #ff8198
    color #ffffff
    z-index 9
    .text
      font-size 20px
      font-weight 700
  .userinfo
    position relative
    display flex
    padding 15px
    height 90px
    background-color #ff8198
    .avatar
      font-size 60px
      width 60px
      height 60px
      line-height 60px
      text-align center
      background-color #fff
      border-radius 50%
    .userinfo-right
      padding 10px 0 0 10px
      color #ffffff
      .login
        margin-bottom 3px
    &::after
      content ''
      position absolute
      right 12px
      top 43px
      width: 12px
      height: 12px
      border: solid #fff
      border-width: 0 2px 2px 0
      transform: translate(-50%, -50%) rotate(-45deg)
  .account
    display flex
    height 83px
    .account-item
      flex 1
      padding: 18px
      color: #666
      font-size: 13px
      text-align center
      background-color #fff
      margin-right 1px
      &:last-child
        margin 0
      .number
        .balance
          font-size 24px
          font-weight 700
          color #ff5f3e
      .account-info
        margin-top 6px
</style>